<template>
	<div>
		
		<i class="el-icon-delete"></i>
		
		<i class="el-icon-goods"></i>
		
		<el-button type="danger" icon="el-icon-delete" circle></el-button>
		
		  <el-radio v-model="radio" label="1">备选项</el-radio>
		  <el-radio v-model="radio" label="2">备选项</el-radio>
		
		 <el-input-number v-model="num" @change="handleChange" :min="1" :max="10" label="描述文字"></el-input-number>
		 
		 <el-switch
		   v-model="value"
		   active-color="#13ce66"
		   inactive-color="#ff4949">
		 </el-switch>
		 
		   <el-date-picker
		       v-model="value1"
		       type="daterange"
		       range-separator="至"
		       start-placeholder="开始日期"
		       end-placeholder="结束日期">
		     </el-date-picker>
			 
			 <p>
				 
				<el-upload
				  action="https://jsonplaceholder.typicode.com/posts/"
				  list-type="picture-card"
				  :on-preview="handlePictureCardPreview"
				  :on-remove="handleRemove">
				  <i class="el-icon-plus"></i>
				</el-upload>
				<el-dialog :visible.sync="dialogVisible">
				  <img width="100%" :src="dialogImageUrl" alt="">
				</el-dialog> 
				 
			 </p>
			 
			 <p>
				  <!-- <el-rate v-model="value1"></el-rate> -->
			 </p>
			 <!-- 
				页大小	5
				页码		10  
			  -->   
			 <p> 
			 <span class="iconfont icon-pinpai"></span>
			 <i class="iconfont icon-leimupinleifenleileibie
"></i>
			 </p>
			 <div id="biao" style="width:300px;height:300px;border:2px solid blue;"></div>
			 <div id="biao2" style="width:800px;height:400px;border:2px solid blue;"></div>
		 
	</div>
</template>

<script>
	import * as echarts from 'echarts';
	export default{
		data(){
			return {
				value1:"",
				value:"",
				radio:"1",
				num:"",
				  dialogImageUrl: '',
				        dialogVisible: false
			}
		},
		mounted() {
			// 基于准备好的dom，初始化echarts实例
			var myChart = echarts.init(document.getElementById('biao'));
			var myChart2 = echarts.init(document.getElementById('biao2'));
			// 绘制图表
			myChart.setOption({
			    title: {
			        text: '本周干饭统计图'   //表头
			    },
			    tooltip: {},		//工具提示
			    yAxis: {			//x轴
			        data: [{value:'周一',textStyle: {
        fontSize: 14,
        color: 'red'
    }}, '周二', '周三', '周四', '周五', '周六'],
			    },
			    xAxis: {},			//y轴
			    series: [{			//
			        name: '饭量',	//提示的文字
			        type: 'bar',	//决定要显示的图表类型  bar柱形图  pie饼图   line折线图
			         label: {
			                        show: true,
									position:[10, 10]
			                    },
					data: [6, 9, {
						value:3,
						itemStyle:{
							color:"#a9abab"
						}
					}, 6, 6, 1],
					showBackground: true,
					backgroundStyle: {
						color: 'rgba(180, 180, 180, 0.2)'
					}
			    }]
			});
			
			
			
			
			myChart2.setOption({
    title: {
        text: '堆叠区域图'
    },
    xAxis: [
        {
            type: 'category',
            boundaryGap: false,
            data: ['周一', '周二', '周三', '周四', '周五']
        }
    ],
    yAxis: [
         {
            type: 'value',
            name: '订单数量'

        },
          {
            type: 'value',
            name: '订单金额'
        }
    ],
    series: [
        {
            name: '订单数量',
            type: 'line',
            stack: '总量',
               smooth: true,
            areaStyle: {
                color:"red"
            },
            data: [20,30,50,15,40]
        },
        {
            name: '订单金额',
            type: 'line',
            stack: '总量',
               smooth: true,
            areaStyle: {},
             yAxisIndex: 1,
     
            data: [2200,2800, 3500, 230,1000]
        }
    ]
})

// data:[
// 	{time:'2020-1',dingdan:'',jine:''},
// 	{time:'2021-8',dingdan:'',jine:''},
// 	{time:'2020-2',dingdan:'',jine:''},
// 	{time:'2022-9',dingdan:'',jine:''},
// 	{time:'2020-1',dingdan:'',jine:''},
// ],



		},
		methods:{
			handleChange(){
				
			},
			 handleRemove(file, fileList) {
			        console.log(file, fileList);
			      },
			      handlePictureCardPreview(file) {
			        this.dialogImageUrl = file.url;
			        this.dialogVisible = true;
			      }
		}
	}
</script>

<style>
</style>
